<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fnx" uri="http://java.sun.com/jsp/jstl/functionsx"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="f" uri="http://www.sctv.com/tags/form"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="/WEB-INF/views/head.jsp"/>
    <style>
        .box-body{min-width: 960px;}
        .tabs{}
        .tabs li{float:left;background-color:#f4f4f4;border-left:1px solid #e2e2e2;border-top:1px solid #ddd;border-right:1px solid #ddd;margin-right:0px;}
        .tabs li a{color:#555555;float:left;text-decoration:none;padding:5px 12px;}
        .tabs li a:link,.tabs li a:visited,.tabs li a:hover,.tabs li a:active{text-decoration:none;}
        .tabs li.active{background-color:#FFFFFF;border-left:1px solid #ddd;border-top:1px solid #ddd;border-right:1px solid #ddd;}
        .tabs li.active a{color:#fff;background:#ed5565;border-color:#ed5565;}
        .tabs li.hover{background-color:#e7e7e7;border-left:1px solid #ddd;border-top:1px solid #ddd;border-right:1px solid #ddd;}
        .tabs li.hover a{color:#000;}
        .header{
            height: 50px;
            padding: 10px;
            margin-bottom: 10px;
        }
        .header input{
            height: 30px;
            border: 1px solid #ccc;
            outline: none;
            text-align: center;
            vertical-align: middle;
            margin-right: 10px;
        }
        .main ul{
            padding-left: 40px;
        }
        .main a{
            color: #333;
        }
        .main li{
            width: 100%;
            height: 200px;
            padding-left: 40px;
            border-left: 1px solid #ccc;
            list-style: none;
            padding-right: 30px;
            margin-bottom: 20px;
        }
        .main .cont{
            border: 1px solid #ccc;
            height: 100%;
            position: relative;
            padding: 10px;
            color: #222222;
        }
        .main .cont:before{
            content: '';
            display: table;
            height: 20px;
            border-left: 1px solid #ccc;
            position: absolute;
            top: -21px;
            left: -42px;
        }
        .cont>input{
            width: 60px;
            border: 1px solid #ccc;
            height: 28px;
            position: absolute;
            top: 85px;
            left: -72px;
            text-align: center;
            outline: none;
        }
        .cont .cont-details{
            width: calc(100% - 200px);
            height: 100%;
            float: left;
        }
        .cont-details>div:nth-child(1){
            float: left;
            width: 200px;
            height: 100%;
        }
        .cont-details img{
            width: 100%;
            height: 100%;
        }
        .cont-details .details{
            float: left;
            min-width: 400px;
            height: 100%;
            padding-left: 15px;
        }
        .details>div>span{
            border: 1px solid #ccc;
            display: inline-block;
            height: 28px;
            padding: 0 10px;
            line-height: 26px;
            border-radius: 3px;
            color: #b4b4b4;
        }
        .details p{
            margin-top: 5px;
            max-width: 380px;
            height: 40px;
            line-height: 40px;
            margin-bottom: 105px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .cont .cont-btn{
            width: 200px;
            height: 100%;
            float: left;
            border-left: 1px solid #ddd;
            padding: 20px 20px 20px 30px;
        }
        .cont-btn a{
            width: 100%;
            height:calc(50% - 15px);
            margin-bottom: 30px;
            border-radius: 5px;
            line-height: 48px;
        }
    </style>
    <script>
      $(function() {
        $("#radio").buttonset();
        $("#sortHead").headSort();
        $("#tabs li").each(function(){
          $(this).hover(function(){
            if(!$(this).hasClass("active")) {
              $(this).addClass("hover");
            }
          },function(){
            $(this).removeClass("hover");
          });
        });
        dateTime();
      });
      function dateTime() {

      }
      function confirmDelete() {
        return confirm("<s:message code='confirmDelete'/>");
      }
      function optSingle(opt) {
        if(Cms.checkeds("ids")==0) {
          alert("<s:message code='pleaseSelectRecord'/>");
          return false;
        }
        if(Cms.checkeds("ids")>1) {
          alert("<s:message code='pleaseSelectOne'/>");
          return false;
        }
        var id = $("input[name='ids']:checkbox:checked").val();
        var url = $(opt+id).attr("href");
        if(url) {
          location.href=$(opt+id).attr("href");
        } else {
          alert("<s:message code='noPermission'/>");
        }
      }
      function optMulti(form, action, confirmMsg) {
        if(Cms.checkeds("ids")==0) {
          alert("<s:message code='pleaseSelectRecord'/>");
          return false;
        }
        if(confirmMsg) {
          if($.isFunction(confirmMsg)) {
            if(!confirmMsg()) {
              return false;
            }
          } else {
            if(!confirm(confirmMsg)) {
              return false;
            }
          }
        }
        form.action=action;
        form.submit();
        return true;
      }
      function optDelete(form) {
        optMulti(form,"delete.do",confirmDelete);
      }
      //添加新闻
      function  addInfo() {
        location.href='/cmscp/core/current_hour/chooseinfolist.do?returnUrl=core/publish_center/node_choose_info&targetNodeId=${queryNodeId}';
      }
    </script>
</head>
<body class="skin-blue content-body">
<jsp:include page="/WEB-INF/views/commons/show_message.jsp"/>
<div class="content-header">
    <h1>时讯</h1>
</div>
<div class="content">
    <div class="box box-primary">
        <div class="box-body table-responsive">
            <div class="header">
                <input id="d11" type="text" value="<fmt:formatDate value="${today}" pattern="yyyy年MM月dd日   HH:mm"/>" onClick="WdatePicker({dateFmt:'yyyy年MM月dd日   HH:mm'})"/>
                <a href="javascript:void(0);" onclick="addInfo()" class="btn btn-default">+添加</a>
            </div>
            <div class="main">
                <ul>
                    <li>
                        <div class="cont">
                            <input type="text" value=""  onClick="WdatePicker({dateFmt:'HH:mm'})"/>
                            <div class="cont-details">
                                <div><img src="" alt="图片未加载"></div>
                                <div class="details">
                                    <p>新闻内容</p>
                                    <div>
                                        <span>视频</span>
                                        <span>时长：<span>00:00</span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="cont-btn">
                                <a href="javascript:;" class="btn btn-default">编辑</a>
                                <a href="javascript:;" class="btn btn-default">清除</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="cont">
                            <input type="text" value=""  onClick="WdatePicker({dateFmt:'HH:mm'})"/>
                            <div class="cont-details">
                                <div><img src="" alt="图片未加载"></div>
                                <div class="details">
                                    <p>新闻内容</p>
                                    <div>
                                        <span>视频</span>
                                        <span>时长：<span>00:00</span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="cont-btn">
                                <a href="javascript:;" class="btn btn-default">编辑</a>
                                <a href="javascript:;" class="btn btn-default">清除</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="cont">
                            <input type="text" value=""  onClick="WdatePicker({dateFmt:'HH:mm'})"/>
                            <div class="cont-details">
                                <div><img src="" alt="图片未加载"></div>
                                <div class="details">
                                    <p>新闻内容</p>
                                    <div>
                                        <span>视频</span>
                                        <span>时长：<span>00:00</span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="cont-btn">
                                <a href="javascript:;" class="btn btn-default">编辑</a>
                                <a href="javascript:;" class="btn btn-default">清除</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="cont">
                            <input type="text" value=""  onClick="WdatePicker({dateFmt:'HH:mm'})"/>
                            <div class="cont-details">
                                <div><img src="" alt="图片未加载"></div>
                                <div class="details">
                                    <p>新闻内容</p>
                                    <div>
                                        <span>视频</span>
                                        <span>时长：<span>00:00</span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="cont-btn">
                                <a href="javascript:;" class="btn btn-default">编辑</a>
                                <a href="javascript:;" class="btn btn-default">清除</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>